import React, { memo } from 'react';
import { SearchPlaylistWrapper } from './style';
import { formatImg, formatCount } from '@/utils/format'
import useShowPlaylistDetail from '@/hooks/useShowPlaylistDetail'
export default memo(function SearchPlaylist(props) {
  const { list } = props
  const goToPlaylistDetail = useShowPlaylistDetail()
  return (
    <SearchPlaylistWrapper>
      {
        list.map(item => {
          return (
            <div className="item" key={item.id}>
              <div className="play sprite_table"></div>
              <img src={formatImg(item.coverImgUrl, 50)} alt="" />
              <div className="mask sprite_covor" onClick={e => goToPlaylistDetail(item.id)}></div>
              <div className="name" onClick={e => goToPlaylistDetail(item.id)}>{item.name}</div>
              <div className="size">{item.trackCount}首</div>
              <div className="creator">by {item.creator?.nickname}</div>
              <div className="favor">收藏：{formatCount(item.bookCount)}</div>
              <div className="listen">收听：{formatCount(item.playCount)}</div>
            </div>
          )
        })
      }
    </SearchPlaylistWrapper>
  )
});
